<template>
  <div>
    <!-- 轮播图区域 -->
    <mt-swipe :auto="4000">
      <!-- 在组件中，使用v-for循环的话，一定要使用key -->
      <!-- 将来，谁使用此轮播图组件，谁为我们传递lunbotuList -->
      <!-- 此时，lunbotuList应该是 父组件向子组件传值来设置 -->
      <mt-swipe-item v-for="item in sonlunbotuList" :key="item.url">
        <img :src="item.img" alt="" :class="{full:isfull}">
      </mt-swipe-item>
    </mt-swipe>
  </div>

  <!-- 
    分析：为什么商品评论中的轮播图为什么那么丑？ 
    1. 首页中的图片，它的宽和高都是使用了100%的宽度
    2. 在商品详情页面中，轮播图的图片，如果也使用宽度为100%的话，页面不好看
    3. 商品详情页面中的轮播图，期望高度是100%，但是宽度为 自适应
    4. 经过分析，得到问题的原因：首页中的轮播图和商品详情中的轮播图，分歧点是宽度到底是100%还是自适应
    5. 既然这两个轮播图，其他方面都是没有冲突的，只是宽带有分歧，那么，我们可以定义一个属性，让使用
    轮播图的调用者，手动指定是否为100%的宽度
  -->
</template>

<script>
  export default {
    props: ["sonlunbotuList","isfull"]
  }
</script>


<style lang="scss" scoped>
/* 轮播区样式 */
.mint-swipe {
  height: 150px;
  .mint-swipe-item {
    text-align: center;
    /* &:nth-child(1) {
      background-color: red;
    }
    &:nth-child(2) {
      background-color: blue;
    }
    &:nth-child(3) {
      background-color: cyan;
    } */
    img {
      // width: 100%;
      height: 100%;
    }
   
  }
}
.full{
  width:100%;
}
</style>

